<template>
  <div id="app">
    <div class="main">
      <!-- 路由视图 -->
      <router-view
        @get-player-id="getPlayerId"
        :player-id.sync="playerId"
        :flag.sync="flag"
        @get-play-all-id="getPlayAllId"
        :cloudList.sync="cloudList"
        @set-cloudList-id="setCloudList"
        @stopMusic="stopSong"
      ></router-view>

      <!-- 播放器组件 -->
      <music
        :player-id.sync="playerId"
        :list-id="listId"
        :flag.sync="flag"
        :cloudList.sync="cloudList"
        ref="music"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playerId: null, //歌曲id
      listId: null, //歌单id
      flag: false, //true 为传入歌手id   false为传入歌单id
      cloudList: [], //云盘歌单  历史歌单
    };
  },
  methods: {
    // 获取子组件播放歌曲id
    getPlayerId(id) {
      console.log("歌曲id", id);
      this.playerId = id;
    },
    // 获取子组件歌单id
    getPlayAllId(id) {
      this.listId = id;
    },
    setCloudList(songs) {
      this.cloudList.unshift(songs);
      console.log("历史歌单", this.cloudList);
    },
    // 进入视频 调用停止音乐的按钮
    stopSong() {
      this.$refs.music.toggleplay();
    },
  },
};
</script>

<style lang="less"></style>
